<!-- 组织类型页面 -->

<template>
  <ContentCard>
    <template #header>
      <PageHeaderNew
        :title="title"
        :breadCrumb="breadCrumb"
        :isShowBtn="true"
        showBack
      >
      </PageHeaderNew>
    </template>
    <ConditionBox :margin-bottom="20">
      <template #left>
        <a-input-search
          :style="{ width: '320px' }"
          placeholder="请输入组织类型"
          search-button
          v-model="searchVal"
          @press-enter="onSearch"
        >
          <template #button-icon>
            <icon-search @click="onSearch" />
          </template>
        </a-input-search>
      </template>
      <template #right>
        <a-button type="primary" @click="edit(1)">新增组织类型</a-button>
        <a-button type="outline" @click="remove(null)" status="danger"
          >批量删除</a-button
        >
      </template>
    </ConditionBox>
    <TableTurn ref="tableTurn" :tableData="searchData" :args="args">
      <a-table-column align="center" :width="80">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column
        title="组织类型名称"
        data-index="name"
        :width="200"
        align="center"
      ></a-table-column>
      <a-table-column
        title="组织节点"
        data-index="node"
        align="center"
        :width="100"
      ></a-table-column>
      <!-- <a-table-column
        title="是否为独立法人"
        data-index="isLegalPerson"
        align="center"
      >
        <template #cell="{ record: { isLegalPerson } }">
          {{ isLegalPerson === 1 ? '是' : '否' }}
        </template>
      </a-table-column> -->
      <a-table-column title="描述" data-index="description" align="center">
        <template #cell="{ record }">
          <span :title="record.description" class="description">{{
            record.description
          }}</span>
        </template>
      </a-table-column>
      <a-table-column
        title="是否启用"
        data-index="status"
        align="center"
        :width="150"
      >
        <template #cell="{ record: { status } }">
          <a-tag
            class="enable"
            :color="
              status === 1 ? `rgb(var(--green-1))` : 'rgb(var(--danger-1))'
            "
            :style="{
              color:
                status === 1 ? `rgb(var(--green-6))` : 'rgb(var(--danger-6))',
              '--enable':
                status === 1 ? `rgb(var(--green-6))` : 'rgb(var(--danger-6))'
            }"
          >
            {{ status === 1 ? '启用' : '停用' }}
          </a-tag>
        </template>
      </a-table-column>
      <a-table-column title="操作" align="center" :width="150">
        <template #cell="{ record }">
          <a-space class="icon" :size="0">
            <a-tooltip content="模板设置">
              <icon-font
                type="icon-setting-def"
                :size="26"
                @click="goDetail(record)"
              ></icon-font>
            </a-tooltip>
            <a-tooltip content="编辑">
              <icon-font
                type="icon-edit"
                :size="26"
                @click="edit(record)"
              ></icon-font>
            </a-tooltip>
            <a-tooltip content="删除" position="left">
              <a-popconfirm
                position="left"
                content="确定删除吗?"
                @ok="remove(record.id)"
              >
                <icon-font type="icon-delete" :size="26"></icon-font>
              </a-popconfirm>
            </a-tooltip>
          </a-space>
        </template>
      </a-table-column>
    </TableTurn>
  </ContentCard>
  <Modals
    v-model:visible="modalVisible"
    :dataList="formData"
    @addRecordEmit="addRecordEmit"
  ></Modals>
</template>

<script lang="ts" setup name="OrganizationalType">
import { useRouter } from 'vue-router';
import Modals from './components/Modals.vue';
import { Message, Modal } from '@arco-design/web-vue';
import { AmendFormData } from '@/types/order';
import {
  OrganizationPatternSearch,
  OrganizationPatternDelete,
  CheckOrganizationType,
  OrganizationPatternAmend,
  OrganizationPatternNewly
} from '@/apis/management/organization/baseSetting/organizationalType/index';

const props = withDefaults(
  defineProps<{
    // clientName: string; // 客户名称
    dataList: any; // 状态列表
  }>(),
  {}
);

// 选择器配置
const args = reactive({
  rowSelection: {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
  }
});
const tableTurn = ref();
/* 储存选择的数据 */
const selectedList = computed(() => tableTurn.value.selectedList);
const router = useRouter();
const title = '组织类型';

const breadCrumb: string[] = ['组织', '基础设置', '组织类型'];

const goDetail = (record: any) => {
  // console.log('id', id);
  router.push({
    name: 'OrganizationSettingTemplate',
    query: {
      userId: record.id,
      name: record.name,
      //公司 1 部门 2 门店 3
      node: record.node === '公司' ? 1 : record.node === '部门' ? 2 : 3
    }
  });
};

let formData = ref<AmendFormData>({
  name: '', // 组织类型
  isLegalPerson: 1, // 是否是法人
  status: 1, // 是否启用
  description: '', // 描述
  id: 0
});
// 删除(确定弹框没有UI)
const remove = async (id: any) => {
  if (!id) {
    if (selectedList.value.length === 0) {
      Message.error('请至少选择一项！');
    } else {
      Modal.open({
        title: '提示',
        content: '确定要删除选中的数据吗？',
        onOk: async () => {
          try {
            await OrganizationPatternDelete({
              ids: selectedList.value
            });
            tableTurn.value.selectedList = [];
            refresh();
          } catch (error: unknown) {
            console.log(error);
          }
        }
      });
    }
  } else {
    await OrganizationPatternDelete({
      ids: [id]
    });
    tableTurn.value.selectedList = [];
    refresh();
  }
};

let searchVal = ref(''); // 搜索框的值

// 获取表数据
const searchData = async (pageData?: any) => {
  try {
    const res: any = await OrganizationPatternSearch({
      name: searchVal.value,
      ...pageData
    });
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log('查询错:', error);
  }
};

// 搜索框
const onSearch = () => {
  tableTurn.value.loadData({
    pageNumber: 0,
    pageSize: -1
  });
};

let modalVisible = ref(false); // 判断是否显示弹出框
const edit = (record: any) => {
  console.log(record, 'record');
  console.log(record.status === '启用');

  if (record !== 1) {
    formData.value = record;
    console.log(record);
  } else {
    formData = ref<AmendFormData>({
      name: '', // 组织类型
      isLegalPerson: 1, // 是否是法人
      status: 1, // 是否启用
      description: '', // 描述
      id: 0
    });
  }
  modalVisible.value = true;
};

const addRecordEmit = async (record: any) => {
  try {
    if (record.id > 0) {
      await OrganizationPatternAmend(record);
    } else {
      await OrganizationPatternNewly(record);
    }
    refresh();
  } catch (error: unknown) {
    console.log(error);
  }
};

const refresh = () => {
  tableTurn.value.loadData();
};
</script>

<style scoped lang="less">
.optionalSe {
  display: inline;
  cursor: pointer;
}
.newOrganization {
  color: #409eff;
  background-color: #ecf5ff;
  border: 1px solid #409eff;
  border-radius: 5px;
  justify-content: space-around;
}
.icon {
  cursor: pointer;
}

.description {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

.enable::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: relative;
  right: 3px;
  background-color: var(--enable);
}
</style>
